
<template>

	<view class="body"  >
		
		<!--search start-->
		<view class="search">
			<uni-section title="搜索框" type="line">
						<uni-search-bar 
						placeholder="阅读,解密,找搭子..."
						@confirm="search" :focus="true" v-model="searchValue"  @focus="focus" @input="input"
							@cancel="cancel" @clear="clear">
						</uni-search-bar>
					
			
			</uni-section>
			
		</view>
		<!--search end-->
			<!--轮播图展示start-->
		<view class="uni-margin-wrap gray">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
			<!--轮播图展示end-->
			
			<!--我想解密 || 我想出题 start-->
			<view class="pazel-get-set">
				<view class="blank"></view>
				<image src="../../static/jiemi.jpg"
				class="pazel-pic"
				>
					
				</image>
					<view class="line"></view>
					
				<image src="../../static/chuti.jpg"
				class="pazel-pic"
				@click="toAddPuzzle"
				>
				</image>
				<view class="blank"></view>
			</view>

			<!--我想解密 || 我想出题 end-->
			
			<!--热门谜题start-->
		<view class="hot-pazel pazel" >
			
			<view class="pazel-title ">
				<image src="../../static/search.png" class="title-img"> </image>
				<view class="pazel-title-text">热门谜题</view>
			
				
			</view>
			<view class="pazel-hot-content">
				
				<ul v-model="hot_list">
					<li v-for="(item,index) in hot_list" 
				v-if="index<9"
				:key = "index" >{{item.name}} 
				<image v-if="item.hit >=100" src="../../static/hot.png" class="title-img after-text-img"></image>
				</li>
				</ul>
			</view>
			<view       class="['more-pazel-button',{'top-change'}:hot_list.length % 2 ==0] " @touchstart="touch_link">
				更多热门谜题
				
			</view>
			
		</view>
		<!--热门谜题end-->
		

		
		<!--分类谜题start-->
		<view class="sortof-pazel pazel">
		<view class="pazel-title">
			<image src="../../static/search.png" class="title-img"> </image>
			<view class="pazel-title-text">分类谜题</view>
		
			
		</view>
		
		<view>
			<view class="pazel-hot-content">
				
				<ul v-model="hot_list">
					<li v-for="(item,index) in hot_list" 
				v-if="index<9"
				:key = "index" >{{item.name}} 
				<image v-if="item.hit >=100" src="../../static/hot.png" class="title-img after-text-img"></image>
				
				</li>
				</ul>
			</view>
			<view class="more-pazel-button">
				<!--  
				
				class="['more-pazel-button',{'top-change'}:hot_list.length % 2 ==0] "
				-->
				更多分类谜题
				
			</view>
		</view>

		</view>
		<!--分类谜题end-->
	</view>


</template>

<script>
	
//import axios from 'axios'
	
	
// onLoad() {
// 			this.getDataHomeMoni()
// 		},


export default {
	
    data() {
		
		
		

        return {
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
			
			//搜索框
			searchValue: '',
			
			//热门榜单
			hot_list: [{
			    name: 'photo',
			    desc: '锁舒服舒服',
			    img: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}]
        }
    },
    
	created() {

	 },

	methods: {
	
	
		//跳转到 我要出题的页面
		toAddPuzzle(){
			
			console.log("id="+this.$store.state.userInfo.id)
			const id= this.$store.state.userInfo.id
			uni.navigateTo({
				url: '/pages/produce_pazel/produce_pazel?id='+id,
			});
		},
	
	
	
	//搜索start
					search(res) {
						uni.showToast({
							title: '搜索：' + res.value,
							icon: 'none'
						})
						
						uni.request({
						    url:'/mock/test',// mock地址
						})
					},
					input(res) {
						console.log('----input:', res)
					},
					clear(res) {
						uni.showToast({
							title: 'clear事件，清除值为：' + res.value,
							icon: 'none'
						})
					},

					focus(e) {
						
					},
					cancel(res) {
						
					},
		//搜索end
		
		
		
		//获取热门榜单start

		
		
			// 请求方法，http://localhost:3000/getDataHome对应mock.js的方法
		// async getDataHomeMoni(callback) {
		//   callback && callback()
		//   let hotTitle = await axios.get('http://localhost:3000/hot_list')
		//   console.log("data="+JSON.stringify(hotTitle))
		//   // const {
		//   //   data,
		//   //   code,
		//   //   msg
		//   // } = hotTitle.data
		//   const data = hotTitle.data
		//   //console.log('data.hotlist =', data)
		//   this.hot_list = data.map(obj=>obj).sort((a,b)=>b.hit - a.hit)
		  
		//   //这里取到的是 hot_list的对象内容
		// }
		
	//获取热门榜单start
    },
	
	
		
}
</script>

<style>
	.body{
		background-color:#F5F5F5 ;
		height: 100%;
		width: 100%;
	}
	.top-change{
		top: 370rpx;
		z-index: 1;
	}
	.more-pazel-button:active{
		color: coral
	}
	.body-main{
		background-color: #F5F5F5;
	}
	.pazel{
		position: relative;
		background-color: white;
		width: 95%;
		margin: auto;
		border-radius: 5%;

	}
	.more-pazel-button{
		position: absolute;
		right: 40rpx;
		color: darkorange;
		font-weight: bold;
		top: 10px;
	}
	.after-text-img{
		opacity: 0.3;
		position: absolute;
		left: 250rpx;
		top: -15rpx;
	}
	.pazel-hot-content{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		border: #f8f8f8 solid 1rpx;
	}
	li{
		position: relative;
		border-radius: 15%;
		box-sizing: border-box;
		margin-left: 40rpx;
		margin-top: 10rpx;
		width: 43%;

		white-space: nowrap;
		overflow:hidden; 
		text-overflow:ellipsis;
		padding: 10rpx;
		float: left;
		background-color: white;
		
	}
	.pazel-title-text{
		margin-top:20rpx ;
		width: 80%;
		padding-left:20rpx ;
		float: left;
		padding-bottom: 10px;
	}
	.title-img{
		margin-left: 20rpx;
		margin-top:20rpx ;
		width: 50rpx;
		height:50rpx;
		float: left;
	}
	.gray{
		background-color: #F5F5F5;
	}
	.blank{
		width: 5%;
	}
	.pazel-get-set{
		box-sizing: border-box;
		padding: 10rpx;
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		 border-radius: 5px;
		transition: background-color 0.3s; /* 添加过渡效果 */
	}
	.pazel-pic:active{
		 transform: translateX(1rpx);
		 transform: translateY(1rpx);
		 transform:scaleX(1.05) 
	}

	.pazel-pic{
		
		
		width: 43%;
		height: 100%;
		
	}
	.line{
		border: 1rpx lightgray solid;
		width: 1rpx;
		height: 80%;
		align-items: center;
		margin: auto;
	}
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	
	
	
	
	.search-result {
			padding-top: 10px;
			padding-bottom: 20px;
			text-align: center;
		}
	
		.search-result-text {
			text-align: center;
			font-size: 14px;
			color:#666;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 0px;
		}
	
		.uni-mt-10 {
			margin-top: 10px;
		}
</style>